<template>
	<kb-layout title="地图位置导航">
	 <map  id="map"
		      :width="sys.windowWidth" 
			  :height="sys.windowHeight"
		      :style="{height: sys.windowHeight + 'px',width: sys.windowWidth + 'px'}" 
		      :longitude="long" 
		      :latitude="lat" 
		      :scale="scale" 			  
			  :markers="markers"
			  @markertap="handleMarkerTap"
			  :enable-zoom="true"
			  :enable-scroll="true"
			  :show-compass="true"
			  :show-location="true" 
			  @labeltap="onLabelTap"
			  @callouttap="onLabelTap"
		    >	
		</map>
		
			<!-- 
					  
			<cover-view :style="{height: dropHeight }" class="cover">
			 <kb-drop-search :areas="ee.areas" height="300" @open="open" @close="close"></kb-drop-search>
			</cover-view> -->
		 
	</kb-layout>
</template>

<script>
   
   // import points from '@/common/tools/marks.js';
   import util from '@/common/tools/utils.js';
   
	export default {
		data() {
			return {
				_mapContext : undefined,
				sys:  uni.getSystemInfoSync(),		 
				height:'', 
				width: '',
				dropHeight:'auto',
				// long:"110.318335",
				// lat: "25.244266",
				scale: 15,
				inShowMark:{},
				points:[ ],
			}
		},
		computed:{ 
			markers(){
				//微信小程序要实现聚合就不能在组件属性里面绑定markers
				const m = [];
			 	//#ifndef MP-WEIXIN		
				this.points.forEach( (p, i) =>  {
					let mk =  this.pointToMarker(p, parseInt( p.id)) ;
					m.push( mk )
					this.inShowMark[mk.id] = mk; //存入当前map
				})				
			    //#endif
				return m;
			},
			long(){
				return this.ee.company.map_point?.longitude;
				 
			},
			lat(){ 
				return this.ee.company.map_point?.latitude;
			}
			 
		},
		 
		methods: {
			handleMarkerTap(e){
				 this.onLabelTap(e)
			}, 
			onLabelTap(e){
				 console.log('label dianji', e)
				var label  = this.inShowMark[ e.detail.markerId].label;
				 
				// #ifdef MP-WEIXIN
				// this._mapContext.moveToLocation(
				// 	this.inShowMark[ e.detail.markerId]
				//  )
				// #endif
				
			},
			//搜索条打开
			open(e){
				console.log("zhank",e)
				this.dropHeight = ( parseInt(e) + 62 )+ 'px';
			},
			//搜索条关闭
			close(e){
				this.dropHeight = 'auto';
			}, 
			pointToMarker(point, i, joinCluster = true)
			{
				return util.pointToMarker(point, i, joinCluster);
			},
			//创建标注
			addPointToMarkers(){
				 const m = [];	
					 
				 this.points.forEach( (p, i) =>  {
					var mk =  this.pointToMarker(p, parseInt( p.id) );
					m.push( mk );
					 
					this.inShowMark[mk.id] = mk; //存入当前map
				 })			
				 this._mapContext.addMarkers({
					markers:  m,
					clear: true,
					complete(res) {
					  console.log('addMarkers',  m)
					}
				})
			}
		}, 
		onLoad() {			 
			if(this.ee.company.map_point){
				this.points = [ this.ee.company.map_point  ];
			} 
		},
		onReady(){
			this._mapContext  = uni.createMapContext('map', this) ;
			// / 仅调用初始化，才会触发 on.("markerClusterCreate", (e) => {})
			  this._mapContext.initMarkerCluster({
				enableDefaultStyle: false,
				zoomOnClick: true,
				gridSize: 60,
				complete(res) {
				  console.log('initMarkerCluster', res)
				}
			  });
			//添加标注点
			this.addPointToMarkers() ;
			
			//处理聚合的标点
			  this._mapContext.on("markerClusterCreate", (e) => {
				console.log("markerClusterCreate", e);
				//聚合数据显示成标点			 
				var juheMarks = [];
				e.clusters.forEach((cluster, i)=> {
					var cl = this.pointToMarker( {						 
							latitude: cluster.center.latitude,
							longitude: cluster.center.longitude,
							title:  "共"+ cluster.markerIds.length+'小区',
							 
						}, 1000000+i  , false);
					this.inShowMark[cl.id] = cl; 
					juheMarks.push( cl ) //push end 
				 }) //forEach end 
				 this._mapContext.addMarkers({
				 	markers: juheMarks,
				 	clear: false,
				 	complete(res) {
				 	  console.log('addMarkers-clusters', res)
				 	}
				 })
			  }) ;
		
		},
	}
</script>

<style>
.cover{
 z-index: 1;
 }
</style>
